<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>portal</title>
    <!-- Layui 核心样式（Thymeleaf 资源语法） -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
  </head>

  <body>
    <!-- 流体布局容器 -->
    <div class="layui-fluid" style="padding: 20px">
      <table id="userTable" lay-filter="userTable"></table>
    </div>

    <!-- LayUI 核心库（移除硬编码路径） -->
    <script th:src="@{/layui/layui.js}"></script>

    <!-- 表格初始化脚本（安全内联语法） -->
    <script th:inline="javascript">
      /*<![CDATA[*/
      layui.use(["table"], function () {
        var table = layui.table;

        // 动态配置表格
        table.render({
          elem: "#userTable",
          skin: "row", // 行边框风格
          even: true, // 隔行背景
          page: true, // 开启分页
          cols: [
            [
              // 表头配置
              {
                field: "name",
                title: "账号",
                width: "30%",
                sort: true,
              },
              {
                field: "hi",
                title: "密码",
                templet: function (d) {
                  // 密码脱敏（安全正则写法）
                  return d.hi ? d.hi.replace(/./g, "＊") : "";
                },
              },
              {
                fixed: "right",
                title: "操作",
                toolbar: "#toolBar",
                width: 150,
              },
            ],
          ],
          data: /*[[${hi}]]*/ [], // Thymeleaf 数据注入
        });

        // 监听工具条事件（示例）
        table.on("tool(userTable)", function (obj) {
          var data = obj.data;
          // 后续操作逻辑...
        });
      });
      /*]]>*/
    </script>

    <!-- 操作列模板 -->
    <script type="text/html" id="toolBar">
      <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
          删除
        </button>
      </div>
    </script>
  </body>
</html>
